<template>
  <ul class="footer">
    <!-- 导航 -->
    <router-link
      v-for="item in tabItems"
      :key="item.path"
      :to="item.path"
      tag="li">
      <i class="iconfont" v-html="item.meta.icon"></i>
      <span>{{item.meta.title}}</span>
    </router-link>
  </ul>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'footer',
  data () {
    return {
    }
  },
  computed: {
    // 待渲染的 tab 项数据
    tabItems () {
      return routes.filter((route) => route.meta?.inTabbar)
    },
  },
}
</script>

<style lang="less" scoped>
.footer {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eee;
  padding: 20px 0;
  li {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    i {
      font-size: 20px;
      margin-bottom: 5px;
    }
  }
}
</style>
